<template>
  <div class="page__bd page__bd_spacing">
    <!--<div class="weui-slider">
      <div class="weui-slider__inner">
        <div style="width: 0;" class="weui-slider__track"></div>
        <div style="left: 0;" class="weui-slider__handler"></div>
      </div>
    </div>
    <br>-->
    <div class="weui-slider-box">
      <div class="weui-slider">
        <div id="sliderInner" class="weui-slider__inner">
          <div id="sliderTrack" class="weui-slider__track" :style="{width:sliderValue+'%', backgroundColor:backgroundColor}"></div>
          <div id="sliderHandler" class="weui-slider__handler" style="font-size:12px;text-align:center;line-height:28px;color:#fff"
		    :style="{left:sliderValue+'%', backgroundColor:backgroundColor}">
		    {{handlerLabel}}
		  </div>
        </div>
      </div>
      <div class="weui-slider-box__value">{{parseInt(sliderValue / 100.0 * (max_value - min_value)) + min_value}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
	min_value: {
	  type: Number,
	  default: 0
	},
	max_value: {
	  type: Number,
	  default: 100
	},
	id: {
	  type: String,
	  default: ''
	},
	value: {
	  type: Number,
	  default: 0
	}
  },
  data() {
    return {
	  sliderValue: 0,
	  sliderHandler: null,
	  touchstart: null,
	  touchmove: null,
	  handlerLabel: ''
	}
  },
  mounted() {
    var sliderValue = (this.value - this.min_value) / (this.max_value - this.min_value) * 100
    this.sliderValue = sliderValue > 0 ? sliderValue : 0

    this.sliderHandler = this.$el.querySelector('#sliderHandler')
	var totalLen = this.$el.querySelector('#sliderInner').offsetWidth,
    startLeft = 0,
    startX = 0

	this.touchstart = e => {
	  if(totalLen == 0)
	    totalLen = this.$el.querySelector('#sliderInner').offsetWidth
	  startLeft = parseInt(this.sliderHandler.style.left) * totalLen / 100
      startX = e.changedTouches[0].clientX
      e.preventDefault()
	  e.stopPropagation()
	}
	this.touchmove = e => {
      var dist = startLeft + e.changedTouches[0].clientX - startX,
      dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist
	  this.sliderValue = parseFloat(dist / totalLen * 100)
	  this.$emit('on-change', parseInt(this.sliderValue / 100.0 * (this.max_value - this.min_value)) + this.min_value, this.id)
      e.preventDefault()
	  e.stopPropagation()
	}
	this.sliderHandler.addEventListener('touchstart', this.touchstart)
	this.sliderHandler.addEventListener('touchmove', this.touchmove)

	if(this.list) {
	  this.handlerLabel = this.list[0].label
	  this.backgroundColor = this.list[0].color
	}
  },
  beforeDestroy() {
    if(this.sliderHandler) {
      this.sliderHandler.removeEventListener('touchstart', this.touchstart)
      this.sliderHandler.removeEventListener('touchmove', this.touchmove)
	}
	this.touchstart = null
	this.touchmove = null
	this.sliderHandler = null
  },
  computed: {
    backgroundColor() {
	  if(this.list) {
	    for(var i=this.list.length - 1; i>=0; i--) {
	      if(!this.list[i].min_value && this.list[i].min_value != 0) { // 平均
	        if(i * 100.0 / this.list.length <= this.sliderValue) {
	          this.handlerLabel = this.list[i].label
		      return this.list[i].color
	          break
	        }
	      } else {
	        if((this.list[i].min_value - this.min_value) * 100.0 / (this.max_value - this.min_value) <= this.sliderValue) { // 按区间
	          this.handlerLabel = this.list[i].label
		      return this.list[i].color
	          break
	        }
	      }
	    }
	  }
	  this.handlerLabel = ''
	  return '#1aad19'
	}
  },
  watch: {
	value(value) {
	}
  }
}
</script>

<style>
@import 'weui/dist/style/weui.min.css';
</style>
